chore: Tailwind v4 の記法統一とブランド書体の修正 - #574
Merged
Merged
Conversation
![[IKcoding-jp]](https://github.githubassets.com/images/gravatars/gravatar-user-420.png){kind=avatar}
IDE の tailwindcss 拡張が示す suggestCanonicalClasses を全ファイルへ適用した。 生成される CSS は等価で、動作・見た目は変わらない。 - important の位置を v4 形式へ（!px-3 → px-3!） - 任意値を標準スケールへ（min-h-[44px] → min-h-11・h-[2px] → h-0.5 など） - v4 でのリネームに追従（flex-shrink-0 → shrink-0・bg-gradient-to-br → bg-linear-to-br） 検証: 変換前後でビルドし、生成 CSS の宣言集合が一致することを確認した。 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01WWxo2ZpLgqp8pd54g9qF1f
font-weight として解釈される書き方で書体を指定していたため、ロゴ・スプラッシュ・ ログイン/新規登録の見出しはいずれも指定が無効で、body のセリフ体が表示されていた。 画面ごとに指定書体もばらついていたため、Inter に一本化する。 - app/globals.css: @theme に --font-brand を定義してユーティリティ化 - スプラッシュ5パターン・ログイン・新規登録・ホームヘッダーを font-brand に統一 - DESIGN.md: 「6.4 フォントファミリー」を追加し、指定方法と統一の理由を明記 あわせて、過去の計画・作業ログ（docs/・.superpowers/）に残る古いクラス名を Tailwind が拾って未使用CSSを生成していたため、@source not で走査対象から除外した。 検証: ビルドして font-family として出力されること、旧クラスが生成されないことを確認。 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01WWxo2ZpLgqp8pd54g9qF1f
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
発端
IDE に tailwindcss 拡張の警告が156件表示されていた。エラーはゼロで CI も通っていたが、内容を確認したところ記法の古さだけでなく、実際に効いていない書体指定が見つかった。
変更内容
1. Tailwind v4 の正規記法へ統一（74ファイル・約390箇所）
!px-3→px-3!）min-h-[44px]→min-h-11、h-[2px]→h-0.5など）flex-shrink-0→shrink-0、bg-gradient-to-br→bg-linear-to-br）IDE の診断は開いているファイルしか出さないため、警告に出ていた19ファイルだけ直すと新旧の記法が混在する。プロジェクト全体を対象に一括で適用した。
2. ブランド表記の書体指定を修正（6ファイル）
font-に CSS 変数を任意値として渡す書き方は、Tailwind v4 では font-weight として解釈される。そのため以下はすべて書体指定が無効で、<body>のセリフ体が表示されていた。さらに画面ごとに指定書体がばらついていたため、Inter に一本化した。
app/globals.cssの@themeに--font-brandを定義し、クラス側はfont-brandを使う。3. 未使用CSSの生成を停止
過去の計画・作業ログ（
docs/・.superpowers/）に残る古いクラス名を Tailwind が拾い、未使用のCSSが生成されていた。@source notで走査対象から除外した。見た目への影響
2 のみ。 ロゴ・スプラッシュ・ログイン見出しの3箇所が、セリフ体から Inter に変わる。これは元々意図されていた「書体を指定する」という実装が、初めて機能するようになったもの。
1 は見た目が変わらないことを検証済み（下記）。
検証
font-familyとして出力されること、旧クラスが生成されないことをビルド結果で確認npm run typecheck/lint/docs:check/format:checkOKnpm run test:runOK（122ファイル / 1,358テスト）ドキュメント
DESIGN.mdに「6.4 フォントファミリー」を追加した。書体の指定方法、ブランド表記を揃える理由、および Markdown や CSS コメントに実在しないクラス名を書くと未使用CSSが生成されるという今回発見した罠を記載している。🤖 Generated with Claude Code
https://claude.ai/code/session_01WWxo2ZpLgqp8pd54g9qF1f